<template>
  <div class="parentBox">
        <!-- 头部搜索框 -->
        <search @sear="search1"></search>
        <!-- 内容标题 -->
        <div class="content-title">
            <p>菜品库存</p>
            <el-button type="primary" @click="Export">导出</el-button>
        </div>
        <!-- 主体内容 -->
        <div class="main-box">
            <div class="main-content">
                <!-- 菜品类别 -->
                <category @sendDishType="getDishType"></category>
                <!-- <h1>{{categoryId}}</h1> -->
                <!-- <h1>{{adjustId}}</h1> -->
                <!-- 表格 -->
                <el-main>
                    <el-table :data="dishesStockData" style="width: 100%" :header-cell-style="{ background: '#F2F2F2'}">
                        <el-table-column type="index" label="序号" width="50"><!--type="index"-->
                        </el-table-column>
                        <el-table-column prop="name" label="菜品名称"  width="100">
                        </el-table-column>
                        <el-table-column prop="unit" label="菜品单位" width="100">
                        </el-table-column>
                        <el-table-column prop="stock" label="库存" width="80"> </el-table-column>
                        <el-table-column prop="checkTime" label="调整时间" :formatter="dateFormat" ></el-table-column>
                        <el-table-column prop="lowStockLine" label="库存过底线" width="100"> </el-table-column>
                        <el-table-column prop="overStockLine" label="库存超出线" width="100"> </el-table-column>
                        <el-table-column label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button type="text" @click="record(scope.row.id)">调整记录</el-button> <!--//@click="edit(scope.row)"-->
                                <!-- <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button> -->
                               
                                <el-button type="text" size="small" @click="edit(scope.$index, dishesStockData)">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pager :total="total" :pageSize="pageSize" :currentPage="currentPage"  @pageChange="pageChange"></pager>
                    <!-- 调整记录框 -->
                    <el-dialog width="50%" title="调整" :visible.sync="recordBox" class="record-box">
                        <div class="block">
                            <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                            <el-button type="primary" @click="queryByTime">查询</el-button>
                        </div>
                         <el-table :data="recordData" :header-cell-style="{ background: '#F2F2F2' }">
                            <el-table-column property="time" label="时间" width="180" :formatter="dateFormat"></el-table-column>
                            <el-table-column property="name" label="菜品名称" width="150"></el-table-column>
                            <el-table-column property="stockBefore" label="修改前库存"></el-table-column>
                            <el-table-column property="stockChange" label="库存变动" width="150"></el-table-column>
                        </el-table>
                        <div slot="footer" class="dialog-footer">
                            <p>共<span>{{count}}</span>条记录</p>
                        </div>
                    </el-dialog>

                    <!-- 编辑框 -->
                    <el-dialog width="40%" title="编辑" :visible.sync="editBox" class="edit-box">
                        <el-form :model="editData" :rules="rules" ref="editData" class="demo-ruleForm">
                            <el-form-item label="菜品名称：" :label-width="'100'">

                                <el-input autocomplete="off" v-model="editData.name" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="库存数量：" :label-width="'100'" prop="stock">
                      
                                <el-input autocomplete="off" v-model="editData.stock"></el-input>
                            </el-form-item>
                            <el-form-item label="库存过底线：" :label-width="'100'" prop="lowStockLine">
                         
                                <el-input autocomplete="off" v-model="editData.lowStockLine"></el-input>
                            </el-form-item>
                            <el-form-item label="库存超出线：" :label-width="'100'" prop="overStockLine">
                               
                                <el-input autocomplete="off" v-model="editData.overStockLine"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="editBox = false">取 消</el-button>
                            <el-button type="primary" @click="modify('editData')">确 定</el-button>
                        </div>
                    </el-dialog>
                    
                </el-main>
            </div>
           

        </div>
  </div>
</template>

<script>
import search from '../../components/stock/dishesStockHeader.vue';
import category from '../../components/stock/dishCategory.vue';
import pager from '../../components/common/pager.vue';
import exportExcel from '../../exportExcel.js';
// import moment from 'moment'
export default {
    components:{search,category,pager},
    data() {
      return {
        total:0,//总页数
        pageSize:5,//每页条数
        currentPage:1,//当前页码
        dishesStockData:[
        {
          name:'农家小炒肉',
          unit: "盘",
          stock: "100",
          created: "2020-12-30 10:30:21",
          low: 20,
          overstep: 20,
        },
        {
          name:'农家小炒肉',
          unit: "盘",
          stock: "100",
          created: "2020-12-30 10:30:21",
          low: 20,
          overstep: 20,
        },
        ],
        recordData: [],//调整记录表格
         editBox: false,
         tableData: [],
         
        recordBox:false,
        count:'5',
        time: [],//调整记录里面的时间
       
       categoryId:null,//接收菜品类型的变量(id)

        //修改
        editData: [],
         rules: {
          stock: [
            { required: true, message: '请输入库存数量', trigger: 'blur' },
            // { type: 'number', message: '请输入数字类型', trigger: 'blur'},
          ],
           lowStockLine: [
            { required: true, message: '请输入库存过底线', trigger: 'blur' },
            // { type: 'number', message: '请输入数字类型', trigger: 'blur'},
          ],
           overStockLine: [
            { required: true, message: '请输入库存超出线', trigger: 'blur' },
            // { type: 'number', message: '请输入数字类型', trigger: 'blur'},
          ],
          
          },

          //头部搜索
          dishName:'',
          status:"",//默认查询全部
      }
      
    },
    methods:{
        dateFormat(row, column, cellValue, index) {
            let date = new Date(parseInt(cellValue));
            let date1 = row[column.property];
            if(date1 == undefined || date1==null){
              return '';
            }
            let Y = date.getFullYear() + "-";
            let M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) + "-" : date.getMonth() + 1 + "-";
            let D =date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
            let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
            let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
            let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D == "NaN-NaN-NaN" ? "" : Y + M + D + " " + h + m + s;
        },

      //菜品库存列表
      getData(page,pageSize,dishName,status,categoryId){
        this.axios.post('/stock/list',{
          page:page,
          pageSize:pageSize,
          dishName:dishName ,
          status:status,
          categoryId:categoryId
        }).then((res)=>{
           let sta=res.data.data;
           this.total=res.data.count;//总条数
           this.dishesStockData=sta;
          //  console.log(sta)
        })
      },
      //页码、显示条数改变
      pageChange(v){
        this.pageSize=v.pageSize;
        this.currentPage=v.currentPage;
        this.getData(this.currentPage,this.pageSize,this.dishName,this.status,this.categoryId)
      },

    //  async getQuery(page,pageSize,dishName,status){
    //     try {
    //           const {data:res} = await this.axios.post('/stock/list',{
    //               page:page,
    //               pageSize:pageSize,
    //               dishName:dishName ,
    //               status:status
    //           });
    //           this.dishesStockData=res.data;
    //           this.total=res.count;
             
    //       } catch (error) {
    //           console.error(error);
    //     }
    //   },

      //查询按钮
      search1(v){
        this.dishesStockData=v.sta;
        this.total=v.count;//查询后的总条数
        this.dishName=v.dishName;
        this.status=v.status;
      },

      //点击修改按钮
    edit(index, data) {
      this.editBox = true;
      this.editData = { ...data[index] };
    },
    //修改操作
    modify(editData){
      this.$refs[editData].validate((valid) => {
          if (valid) {
            console.log(typeof this.editData.lowStockLine)
             this.axios.post('/stock/update',{
        id:this.editData.id,
        name:this.editData.name,
        stock:this.editData.stock,
        lowStockLine:this.editData.lowStockLine,
        overStockLine:this.editData.overStockLine,

      }).then((res)=>{
        if (!res.data.error) {
          this.$message.success("修改成功");
          this.editBox = false;
          this.getData(this.currentPage,this.pageSize);
        } else {
          this.$message.error("修改失败");
        }
      })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

     
    },
    //点击调整记录
    // async  record(id) {
    //   try {
    //     const res= await this.axios.post('/stock/findRecord',{
    //       id:id
    //     });
    //     this.recordData=res.data;
    //     // console.log(res.data.count)
    //     if(res.data){
    //        this.recordBox = true; //存在数据时才弹出窗口
    //     }
    //   } catch (error) {
    //     console.error(error);
    //   }
    // },

    record(id) {
          this.axios.post('/stock/findRecord',{
          id:id,
          startTime:this.time[0] || undefined,
          endTime:this.time[1] || undefined
      }).then((res)=>{
        console.log(this.time[0],this.time[1],id);
        this.$store.commit('updateId',id);
        this.recordData=[];//赋值前先清空表格数据
        console.log(res.data.data.length)
          if(res.data.data.length){
          this.recordData=res.data.data;
          this.count=res.data.data.length;
          this.recordBox = true; //存在数据时才弹出窗口
        }
       
      })
      
    },
    //导出功能
     Export(){
          let json={
            method:'get',
            url:'/stock/export',
            data:this.code,
            fileName:'菜品库存'
          }
          exportExcel.exportMethod(json);
        },

    //通过时间查询
    queryByTime(){
      this.record(this.adjustId);
      // console.log(this.adjustId)
    },
    //获取子组件传过来的菜品类型
     getDishType(v){
        this.categoryId=v;

        this.getData(this.currentPage,this.pageSize,this.dishName,this.status,this.categoryId);

      }
    },
    computed:{
      //获取调整弹窗对应的row.id
      adjustId(){
        return this.$store.state.adjustId;
      }
    },
    watch:{
      //监听时间如果为空  那么赋值为空数组
      time(time){
        if(!time){
          this.time=[];
        }
      }
    },
   
    mounted(){
     this.getData(this.currentPage,this.pageSize,this.dishName,this.status,this.categoryId);
    }
}
</script>

<style lang="less" scoped>
    *{
        font-family: "微软雅黑";
        font-weight: 400;
        color: '#333'
    }
// 内容标题
  .content-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.1rem solid #dbe0e9;
    margin-top: 1rem;
    height: 4.5rem;
    background:#F2F2F2;
    padding:0 2rem;
    .el-button{
      height: 3.5rem;
      padding: 0 2.5rem;
    }
    p{
      font-size: 1.6rem;
    }
  }
//   主体内容样式
  .main-box{
      border: 0.1rem solid #dbe0e9;
      border-top: none;
      background: #fff;
    .main-content{
        padding:  1.5rem;
        display: flex;
        .el-main{
            width: 100%;
            padding: 0;
            padding-left: 1rem;
            .el-table{
                border: 0.1rem solid #dbe0e9;
            }
            /deep/.el-table td, .el-table th{
                padding: 0.5rem 0;
            }
            /deep/.el-table th>.cell,.el-table tr td{
            text-align: center;
            }
            /deep/.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
                text-align: center;
            }

        //调整记录样式
        .record-box{
            /deep/.el-dialog__body{
                padding: 0.5rem 1rem;
            }
            /deep/ .el-dialog__header{
                background: #F2F2F2;
                font-weight: 400;
                // text-align: center;
            }
            /deep/.el-table td, .el-table th{
                padding: 0.8rem 0;
            }
            .block{
                margin-bottom: 1rem;
            }
            .dialog-footer{
                color: #606266;
                font-size: 1.4rem;
            }
            .el-button{
                padding: 1rem 1.8rem;
                margin-left: 0.5rem;
            }
            
        }
        //修改弹窗样式
        .edit-box{
            /deep/.el-dialog__body{
                padding: 1rem 1rem 0;
                margin-top: 1rem;
            }
            /deep/.el-form-item__label{
                padding:0;
                width: 20%;
                font-size: 1.4rem;
            }
           /deep/ .el-dialog__header{
                background: #F2F2F2;
                // text-align: center;
            }
            .el-input{
                width: 75%;
                text-align: center;
            }
            

        }

        }
    }
  }
</style>